<template>
  <!-- 安全管理 -->
  <div class="body safetyManage">
    <div class="titleBox">
      <img src="../../assets/safetyManage.png" alt="" class="titlebg" />
      <p class="title">安全管理</p>
    </div>
    <div class="main" @click="$emit('safetyFun', true)">
      <div id="safetyChart" class="myChart"></div>
    </div>
  </div>
</template>

<script>
import api from "@/util/api";
export default {
  name: "safetyManage",
  data() {
    return {
      msg: "safetyManage",
      barOptions: {
        color: ["#CC614D", "#5483E2", "#D8AA21"],
        title: {
          text: "近3次安全检查评分",
          left: "0%",
          textStyle: {
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        grid: {
          left: "0%",
          top: "30%",
          height: '140',
          containLabel: true,
        },
        legend: {
          top: "10%",
          left: '0%',
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            fontSize: 11,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          axisLabel: {
            fontSize: 12,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        dataset: {
          source: [],
        },
        series: [
          { type: "bar", showBackground: true },
          { type: "bar", showBackground: true },
          { type: "bar", showBackground: true },
        ],
      },
    };
  },
  mounted() {
    this.securityIndexShow();
  },
  methods: {
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("safetyChart"));
      // 绘制图表
      myChart.setOption(this.barOptions);
    },


    /** API */
    // 大屏展示数据:安全检查得分情况统计
    securityIndexShow(){
        api.securityIndexShow({}, (res) => {
          this.barOptions.xAxis.data = res.data.data.data;
          this.barOptions.dataset.source = res.data.data.result;
          this.drawBar()
        })
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.safetyManage {
  width: 100%;
  height: 100%;
  background-color: red;
  color: #fff;
}
.body {
  .titleBox {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #5d96ed;
    position: relative;
    .titlebg {
      height: 60px;
      position: absolute;
    }
    .title {
      position: absolute;
      z-index: 1;
      top: 16px;
      left: 60px;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 62px);
    padding: 20px;
    box-sizing: border-box;
    .myChart {
      height: 100%;
      color: #fff;
    }
  }
}
</style>
